<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>

<style>
    .tree {
        position: relative;
        top: 420px;
        left: 260px;
    }

    .contact_form {
        width: 70%;
        position: absolute;
        top: 20%;
        left: 35%;
    }

    .contact_form h2,
    .contact_form span {
        font-family: Georgia, 'Times New Roman', Times, serif;
    }

    .contact_form ul {
        list-style: none;
        width: 750px;
        margin: 0px;
        padding: 0px;
    }

    .contact_form li {
        border-bottom: 1px solid #eee;
        padding: 12px;
        position: relative;
    }

    .contact_form li:first-child,
    .contact_form li:last-child {
        border-bottom: 1px solid #777;
    }

    .contact_form h2 {
        margin: 0;
    }

    .contact_form textarea {
        width: 300px;
        padding: 8px;
    }

    .contact_form button {
        margin-left: 250px;
    }

    .special input {
        height: 15px;
        width: 40px;
        padding: 5px 8px;
    }

    .usually input,
    .usually textarea {
        background: #fff url(./images/attention.png) no-repeat 98% center;
        border: 1px solid #aaa;
        box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
        border-radius: 2px;
        transition: padding .25s;
    }
    .usually input:focus,.usually textarea:focus{
        background: #fff;
        border: 1px solid #555;
        padding-right: 70px;
        box-shadow: 0 0 3px #aaa;
    }
    button.subit{
           border-radius: 3px;
           background-color: #68b12f;
           background: linear-gradient(top,#68b12f,#50911e);
           color:white;
           box-shadow: inset 0 1px 0 0 #9fd574;
           font-weight: bold;
           text-align: center;
           text-shadow: 0 -1px 0 #396715;
    }
    button.subit:hover{
        opacity: 85;
        cursor: pointer;
    }
    button.subit:active{
        border: 1px solid #20911e;
        box-shadow: 0 0 10px 5px #356b0b inset;
    }
    .usually input:focus:invalid,.usually textarea:focus:invalid{
        background: #fff url(./images/warn.png) no-repeat 98% center;
        box-shadow: 0 0 5px #d45252;
        border-color: #b03535;
    }
</style>

<body>
    <img class="tree" src="./images/tree.jpg" alt="">
    <form class="contact_form" action="#">
        <ul>
            <li class="usually">
                <h2>用户叶鸿辉注册</h2>
            </li>
            <li class="usually">
                <span>昵称：</span>
                <input type="text" id="name" name="name">
            </li>

            <li class="usually">
                <span>注册邮箱：</span>
                <input type="email" name="email" id="" placeholder="net21057@qq.com" required>
            </li>

            <li class="usually">
                <span>密码：</span>
                <input type="password" name="password" id="" required>
            </li>

            <li class="special">
                <span>性别：</span>
                <input type="radio" name="sex" id="male" checked>
                <label for="male">男</label>
                <input type="radio" name="sex" id="female">
                <label for="female">女</label>
            </li>

            <li class="usually">
                <span>年龄：</span>
                <input type="number" name="age" id="" required>
            </li>

            <li class="special">
                <span>兴趣爱好:</span>
                <input type="checkbox" id="football" id="interest">
                <label for="football">足球</label>
                <input type="checkbox" id="basketball" id="interest">
                <label for="basketball">篮球</label>
                <input type="checkbox" id="swim" id="interest">
                <label for="swim">游泳</label>
                <input type="checkbox" id="sing" id="interest">
                <label for="sing">唱歌</label>
                <input type="checkbox" id="run" id="interest">
                <label for="run">跑步</label>
                <input type="checkbox" id="yoga" id="interest">
                <label for="yoga">瑜伽</label>
            </li>

            <li class="usually">
                <span>自我介绍：</span>
                <textarea name="introduction" id="" cols="200" rows="10" placeholder="请输入你的自我介绍" required></textarea>
            </li>

            <li>
                <button class="submit" type="submit">立即注册</button>
            </li>

        </ul>


    </form>
</body>

</html>